@import "../../variable";

$other-height:120px;
.other{
  height: $other-height;
}
.other-content{
  height: 90px;
  display: flex;
}
.other-content-item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: $big-font;
  border-top: 1px solid $main-color;
  border-bottom: 1px solid $main-color;
  color: $main-color;
}
.other-content-item-active{
  background-color: $main-color;
  color: $white;
}

.main{
  height: calc(100vh - #{$other-height});
  overflow-y: auto;
}

.title {
  height: 96px;
  background: $sub-color;
  display: flex;
  justify-content: space-between;
  font-size: $middle-font;
}

.title-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.title-left-bottom {
  font-size: $small-font;
  color: $grey;
}

.title-right {
  display: flex;
  align-items: center;
}

// 中间
.midd {
  width: 710px;
  height: 180px;
  border: 1px solid $sub-color;
  border-radius: 12px;
  margin: 20px auto 20px;
  box-sizing: border-box;
  padding: 30px 0;
  display: flex;
}

.midd-d {
  width: 1px;
  background-color: $sub-color;
}

.midd-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: $black;
  font-size: $big-font;
  justify-content: center;
  align-items: center;
}

.midd-item-bottom {
  margin-top: 8px;
  font-size: $middle-font;
  color: $grey;
}

.card {
  display: flex;
  flex-wrap: wrap;
  padding-top: 28px;
}
.card-item{
  padding: 0px 28px 28px 0 ;
}

// 答题卡
.subject-result-cell {
  width: 80px;
  height: 80px;
  line-height: 80px;
  color: $black;
  font-size: $big-font;
  border-radius: 80px;
  border: 1px solid $black;
  text-align: center;
}

.subject-result-cell-right {
  background-color: $green;
  border-color: #52c41a;
  color: $white;
}

.subject-result-cell-wrong {
  background-color: $red;
  border-color: $red;
  color: $white;
}
